<template>
  <div>
    <cardTool>
      <template #headerDiy>
        <el-row type="flex" justify="end">
          <el-button type="primary" size="small" @click="addFn">添加角色</el-button>
        </el-row>
      </template>
      <template #body>
        <el-table
          border
          :data="roles"
          :header-cell-style="headerCellStyle"
          :cell-style="cellStyle"
        >
          <el-table-column label="角色名称" prop="title" />
          <el-table-column label="角色描述" prop="description" />
          <el-table-column label="操作">
            <template v-slot="{row}">
              <el-button size="small" type="primary" @click="permFn(row.id)">分配权限</el-button>
              <el-button size="small" type="warning" @click="editFn(row.id)">编辑</el-button>
              <el-button size="small" type="danger" @click="delFn(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </cardTool>
    <el-row type="flex" justify="center">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="limit"
        :current-page.sync="currentPage"
        @current-change="currentChange"
      />
    </el-row>
    <addRoles
      ref="addroles"
      :visible-dialog.sync="visibleDialog"
      @updateFn="getRolesList"
    />
    <rolesPerm ref="rolesPerm" :show-dialog.sync="showDialog" />
  </div>
</template>

<script>
import { getRoles, delRolesId, rolesId, rolesCount } from '@/api/roles'
import addRoles from './components/addRoles.vue'
import rolesPerm from './components/roles-perm.vue'
export default {
  components: { addRoles, rolesPerm },
  data() {
    return {
      roles: [],
      visibleDialog: false,
      start: 0,
      limit: 9,
      total: 0,
      showDialog: false,
      currentPage: 1
    }
  },
  created() {
    this.getRolesList()
  },
  methods: {
    headerCellStyle() {
      return 'text-align:center'
    },
    cellStyle() {
      return 'text-align:center'
    },

    async getRolesList() {
      const res = await getRoles({
        _limit: this.limit,
        _start: this.start
      })
      this.roles = res.data
      const res2 = await rolesCount()
      this.total = res2.data
    },
    addFn() {
      this.visibleDialog = true
    },
    delFn(id) {
      this.$confirm('确认删除吗?', '提示', {
        type: 'error'
      }).then(async() => {
        await delRolesId(id)
        if (this.roles.length === 1 && this.total !== this.limit) {
          this.currentPage--
          this.start = (this.currentPage - 1) * this.limit
        }
        this.getRolesList()
      }).catch((error) => {
        console.log(error)
      })
    },
    async editFn(id) {
      const res = await rolesId(id)
      this.$refs.addroles.formData = res.data
      this.visibleDialog = true
    },
    currentChange(page) {
      this.start = (page - 1) * this.limit
      this.getRolesList()
    },
    permFn(id) {
      this.showDialog = true
      this.$refs.rolesPerm.getRolePerm(id)
    }
  }

}
</script>

<style scoped>

</style>
